<template>
	<div>
		<el-form @submit.native.prevent ref="editForm">
			<el-row :gutter="24">
				<el-col :span="8">
					<el-form-item>
						<el-input v-model="input" prefix-icon="el-icon-search" placeholder="查询文档名称或标准类型"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item>
						<el-button type="primary" @click="getDocumentByInput()" size="small"> 查询 </el-button>
						<el-button size="small" @click="upload()" type="primary">上传文档</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-table v-if="user != '企业管理员'" :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; "
			:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
			<el-table-column prop="type" label="标准类型" width="250px">
			</el-table-column>
			<el-table-column prop="name" label="文档名称"> </el-table-column>
			<el-table-column prop="companyName" label="发布机构" width="250px"> </el-table-column>
			<el-table-column label="操作" width="240px">
				<template slot-scope="scope">
					<el-link :href="scope.row.url" target="_blank">
						<el-button type="text">预览</el-button>
					</el-link>
					<el-link :href="downUrl" @click="download(scope.row.id)">
						<el-button type="text" style="padding-left: 10px;">下载</el-button>
					</el-link>
					<el-link @click="rowDel(scope.row.id)">
						<el-button type="text" style="padding-left: 10px;">删除</el-button>
					</el-link>
				</template>
			</el-table-column>
		</el-table>
		<el-table v-if="user == '企业管理员'" ref="list" :data="tableData" style="width: 100%; margin-bottom: 15px" border
			highlight-current-row :default-sort="{ prop: 'date', order: 'descending' }" @select-all="handleSelectionChange"
			@select="handleSelectionChange" @selection-change="handleSelectionChange"
			:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
			<el-table-column fixed type="selection"> </el-table-column>
			<el-table-column property="id" label="ID"> </el-table-column>
			<el-table-column property="companyName" label="公司名称">
			</el-table-column>
			<el-table-column property="name" label="文档名称"> </el-table-column>
			<el-table-column property="url" label="文档地址"> </el-table-column>
			<el-table-column property="type" label="标准类型"> </el-table-column>
			<el-table-column property="price" label="文档价格(元)"> </el-table-column>
			<el-table-column property="createTime" label="发布时间">
			</el-table-column>
			<el-table-column fixed="right" label="操作">
				<template slot-scope="scope">
					<el-button type="text" @click="rowEdit(scope.row)">编辑
					</el-button>
					<el-button type="text" @click="rowDel(scope.row.id)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<el-pagination v-if="user == '企业管理员'" :page-sizes="[10, 20, 30, 40, 100]" :page-size="pageSize" :total="total"
			@current-change="currentChange" @size-change="sizeChange" layout="total, sizes, prev, pager, next, jumper"
			style="padding-bottom: 15px">
		</el-pagination>
		<Upload v-if="isShowUpload" :isShowUpload="isShowUpload" @dialogClose="dialogClose" @close="get()"></Upload>
		<FileManageEdit ref="fileManageEdit" v-if="isShowEditDialog" :isShowEditDialog="isShowEditDialog"
			:record="formFileds" @dialogClose="dialogClose" @close="get()"></FileManageEdit>
	</div>
</template>

<script>
import Preview from "./preview.vue";
import Upload from "./upload.vue";
import FileManageEdit from "@/view/systemManage/fileManage/fileManageEdit.vue";
import {
	getDocumentByCompany,
	getDocumentWithOtherByInput,
	getByInput,
	deleteDocument
} from "@/api/systemManage/documentManage";
export default {
	components: {
		Preview,
		Upload,
		FileManageEdit
	},
	data () {
		return {
			user: localStorage.getItem('role'),
			formFileds: {},
			tableData: [],
			spanArr: [],
			downUrl: "",
			maxLength: 0,
			isShowPreview: false,
			isShowUpload: false,
			input: "",
			pageSize: 10,
			pageNum: 1,
			total: 0,
			isShowEditDialog: false
		};
	},
	methods: {
		dialogClose () {
			this.isShowPreview = false;
			this.isShowUpload = false;
			this.isShowEditDialog = false
		},
		rowEdit (row) {
			this.formFileds = row
			this.isShowEditDialog = true
		},
		preview () {
			this.isShowPreview = true;
		},
		upload () {
			this.isShowUpload = true;
		},
		// 删除
		rowDel (id) {
			// 让当前删除按钮失焦
			// event.target.blur();

			this.$confirm("您确定要删除该文档吗？", "删除", {
				comfirmButtonText: "确定",
				cancelButtonText: "取消",
			}).then(() => {
				deleteDocument("id=" + id).then((res) => {
					if (res) {
						this.$message.success("删除成功！");
						this.get();
					}
				});
			});
		},
		getSpan () {
			var index;
			this.spanArr = [];
			for (let i = 0; i < this.tableData.length; i++) {
				if (i == 0) {
					this.spanArr.push(1);
					index = 0;
				} else {
					if (this.tableData[i].type == this.tableData[i - 1].type) {
						this.spanArr[index] += 1;
						this.spanArr.push(0);
					} else {
						this.spanArr.push(1);
						index = i;
					}
				}
			}
		},
		objectSpanMethod ({
			row,
			column,
			rowIndex,
			columnIndex
		}) {
			if (columnIndex == 0) {
				let rowspan = this.spanArr[rowIndex];
				let colspan = rowspan > 0 ? 1 : 0;
				return [rowspan, colspan];
			}
		},
		currentChange (e) {
			this.pageNum = e;
			this.get();
		},
		// 页面显示行数
		sizeChange (e) {
			this.pageSize = e;
			this.get();
		},
		get () {
			if (this.user == '企业管理员') {
				let par = {
					input: this.input,
					pageSize: this.pageSize,
					pageNum: this.pageNum,
				}
				getDocumentByCompany(par).then((res) => {
					if (res) {
						this.tableData = res.data.list
						// this.getSpan();
					}
				});
			} else {
				getDocumentWithOtherByInput('input=' + this.input).then((res) => {
					if (res) {
						this.tableData = res.data;
						this.getSpan();
					}
				});
			}

		},
		download (id) {
			this.downUrl = "http://www.jianpingyun.com/api/document/download?id=" + id;
		},
		// 查询框
		getDocumentByInput () {
			getByInput("input=" + this.input).then((res) => {
				if (res) {
					this.tableData = res.data;
					this.getSpan();
				}
			});
		}
	},
	mounted () {
		this.get();
	},
};
</script>

<style scoped>
.button {
	width: 100px;
	height: 40px;
	margin: -10px 0;
}
</style>
